<template>
  <div class="login-wrap">
    <div class="ms-login">
      <el-form label-position="left" :model="addForm" :rules="rules" ref="addForm" label-width="0px"
               class="demo-ruleForm login-container">
        <h3 class="title">线上教育平台后端注册</h3>

        <el-form-item prop="loginname">
          <el-input size="small" v-model="addForm.loginName" auto-complete="off" placeholder="請輸入登錄賬戶"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input size="small" v-model="addForm.password" auto-complete="off" placeholder="請輸入登錄密碼"></el-input>
        </el-form-item>

        <el-form-item prop="realname">
          <el-input size="small" v-model="addForm.realName" auto-complete="off" placeholder="請輸入真實姓名"></el-input>
        </el-form-item>

        <el-form-item prop="gender">
          <el-select v-model="addForm.gender" placeholder="請選擇性別">
            <el-option key="男" value="男"></el-option>
            <el-option key="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="email">
          <el-input size="small" v-model="addForm.email" auto-complete="off" placeholder="請輸入電子郵箱"></el-input>
        </el-form-item>

        <el-form-item prop="mobile">
          <el-input size="small" v-model="addForm.mobile" auto-complete="off" placeholder="請輸入聯係方式"></el-input>
        </el-form-item>

        <el-form-item prop="mobile">
          <el-input size="small" v-model="addForm.laddress" auto-complete="off" placeholder="請輸入聯係地址"></el-input>
        </el-form-item>

        <el-form-item prop="role">
          <el-select v-model="addForm.role" placeholder="请选择權限狀態">
            <el-option key="教师" value="教师">教师</el-option>
            <el-option key="普通用户" value="普通用户">普通用户</el-option>
          </el-select>
        </el-form-item>

        <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="submitForm()" :loading="logining">註冊</el-button>
        </el-form-item>

        <el-form-item prop="password">
          <router-link :to="{path:'login'}">
            <el-button type="text" class="button" style="position: absolute;right: 0px">已有账户，去登录！</el-button>
          </router-link>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'login',
  data() {
    return {
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,

      addForm: {
        loginName: '',
        password: '',
        realName: '',
        gender: '女',
        email: '',
        mobile: '',
        laddress: '',
        balance: 6000,
        role: '普通用户',
        sfjy: 0,
      },
      //rules前端验证
      rules: {
        loginname: [{required: true, message: '請輸入账号', trigger: 'blur'}],
        password: [{required: true, message: '請輸入密码', trigger: 'blur'}],
      }
    }
  },
  // 创建完毕状态(里面是操作)
  created() {

  },
  // 里面的函数只有调用才会执行
  methods: {

    submitForm() {

      const _this = this;

      this.addForm.role = this.addForm.role == '普通用户' ? 3 : 2;

      axios.post(localStorage.getItem("globalUrl") + "login/add", this.addForm).then(function () {

        _this.$router.push({path: '/login'})

        _this.$message({
          type: 'success',
          message: '註冊成功!'
        });

      });


    }


  }
}
</script>

<style scoped>
.login-wrap {
  background-color: #42B983;
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  position: relative;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 300px;
  height: 700px;
  line-height: 30px;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ccc;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
}
</style>
